<%@ page import="com.ychs.entity.Competition" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String id = request.getParameter("id");
    String category = request.getParameter("category");
    String year = request.getParameter("year");
    String title = request.getParameter("title");
    String leader = request.getParameter("leader");
    String members = request.getParameter("members");
    String level = request.getParameter("level");
    String teacher = request.getParameter("teacher");

    Competition competition = new Competition();
    competition.setId(Integer.parseInt(id));
    competition.setCategory(category);
    competition.setYear(Integer.parseInt(year));
    competition.setTitle(title);
    competition.setLeader(leader);
    competition.setMembers(members);
    competition.setLevel(level);
    competition.setTeacher(teacher);

    pageContext.setAttribute("competition",competition);
%>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layuimini-form">

            <form class="layui-form" action="" id="competitionModifyForm" lay-filter="competitionModifyFormFilter">

                <input type="hidden" id="id" name="id">

                <div class="layui-form-item">
                    <label class="layui-form-label">竞赛类别<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="category" name="category" lay-filter="category"
                                lay-verify="required" lay-reqtext="竞赛类别为必填项">
                            <option value="">请选择</option>
                            <option value="设计类">设计类</option>
                            <option value="创新类">创新类</option>
                            <option value="实战类">实战类</option>
                        </select>
                    </div>
                </div>


                <div class="layui-form-item">
                    <label class="layui-form-label">年度<span style="color: red">*</span></label>
                    <div class="layui-input-block" >
                        <input type="text" class="layui-input"
                               id="year" name="year"
                               placeholder="请选择年度" autocomplete="off"
                               lay-verify="required" lay-reqtext="年度为必填项！" readonly>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">题目<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="title" name="title"
                               placeholder="请输入题目" autocomplete="off"
                               lay-verify="required|title" lay-reqtext="题目不能为空">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">组长<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="leader" name="leader" lay-filter="leader"
                               placeholder="请输入组长" autocomplete="off"
                               lay-verify="required|realname" lay-reqtext="组长名不能为空">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">组员<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="members" name="members" lay-filter="members"
                               placeholder="请输入组员" autocomplete="off"
                               lay-verify="required|realname" lay-reqtext="组员名不能为空">
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">获奖等级<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <select id="level" name="level" lay-filter="level"
                                lay-verify="required" lay-reqtext="获奖等级为必填项">
                            <option value="">请选择</option>
                            <option value="特等奖">特等奖</option>
                            <option value="一等奖">一等奖</option>
                            <option value="二等奖">二等奖</option>
                            <option value="三等奖">三等奖</option>
                            <option value="优秀奖">优秀奖</option>
                            <option value="无">无</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">指导老师<span style="color: red">*</span></label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input"
                               id="teacher" name="teacher" lay-filter="teacher"
                               placeholder="请输入指导老师" autocomplete="off"
                               lay-verify="required|realname" lay-reqtext="指导老师名不能为空">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" id="saveBtn" class="layui-btn layui-btn-normal"
                                lay-submit="" lay-filter="saveBtn">确认保存</button>
                        <button type="button" id="resetBtn" class="layui-btn layui-btn-normal"
                                lay-filter="resetBtn">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
</div>

<script src="lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="lib/jq-module/paigusu.min.js" charset="utf-8"></script>
<script>
    layui.use(['form','layedit','laydate'], function () {
        var form = layui.form,
            layedit=layui.layedit,
            layer=layui.layer,
            laydate=layui.laydate,
            initYear

        form.render();

        function formInit() {
            form.val('competitionModifyFormFilter',{
                "id":'${competition.id}',
                "category":'${competition.category}',
                "year":'${competition.year}',
                "title":'${competition.title}',
                "leader":'${competition.leader}',
                "members":'${competition.members}',
                "level":'${competition.level}',
                "teacher":'${competition.teacher}',
            })
        }
        formInit();

        $("#title").blur(function(){
            var title = $("#title").val();
            var reg = /^[\u4e00-\u9fa5]{2,30}$/;//正则表达式,2-30个汉字
            if(title.length == 0|| title==null || title == '') {
                layer.msg('题目为必填项！', {icon: 5});
            }else{
                if(!reg.test(title)) {
                    layer.msg('题目应为2-30个汉字', {icon: 5});
                }
            }
        });
        $("#leader").blur(function(){
            var leader = $("#leader").val();
            var reg = /^[\u4e00-\u9fa5]{2,6}$/;//正则表达式,2-6个汉字
            if(leader.length == 0|| leader==null || leader == '') {
                layer.msg('组长名为必填项！', {icon: 5});
            }else{
                if(!reg.test(leader)) {
                    layer.msg('组长名为2-6个汉字', {icon: 5});
                }
            }
        });
        $("#members").blur(function(){
            var members = $("#members").val();
            var reg = /^[\u4e00-\u9fa5]{2,6}$/;//正则表达式,2-6个汉字
            if(members.length == 0|| members==null || members == '') {
                layer.msg('组员名为必填项！', {icon: 5});
            }else{
                if(!reg.test(members)) {
                    layer.msg('组员名为2-6个汉字', {icon: 5});
                }
            }
        });
        $("#teacher").blur(function(){
            var teacher = $("#teacher").val();
            var reg = /^[\u4e00-\u9fa5]{2,6}$/;//正则表达式,2-6个汉字
            if(teacher.length == 0|| teacher==null || teacher == '') {
                layer.msg('指导老师名为必填项！', {icon: 5});
            }else{
                if(!reg.test(teacher)) {
                    layer.msg('指导老师名为2-6个汉字', {icon: 5});
                }
            }
        });

        //监听提交
        form.verify({
            realname:function (value) {
                if(/^[\u4e00-\u9fa5]{2,6}$/.test(value)==false){
                    return '姓名为2-6位汉字'
                }
            },
            title:function (value) {
                if(/^[\u4e00-\u9fa5]{2,30}$/.test(value)==false){
                    return '题目为2-30位汉字'
                }
            }
        });


        laydate.render({
            elem:'#competitionDate',
            trigger:'click', //解决日历一闪而过的问题
        });

        laydate.render({
            elem:'#year',
            type:'year',
            trigger:'click',
            ready: function(date){ // 控件在打开时触发，回调返回一个参数：初始的日期时间对象
                initYear = date.year;
            },
            change: function(value, date, endDate){ // 年月日时间被切换时都会触发。回调返回三个参数，分别代表：生成的值、日期时间对象、结束的日期时间对象
                var selectYear = date.year;
                var differ = selectYear-initYear;
                if (differ != 15 && differ != -15) {
                    if($(".layui-laydate").length){
                        $("#year").val(value);
                        $(".layui-laydate").remove();
                    }
                }
                initYear = selectYear;
            }
        });

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let url = 'CompetitionServlet?method=modify';
            let successFn = function (res) {
                if (res == 'true') {
                    layer.close(parentIndex);
                    layer.msg("修改成功",{icon: 1});
                    parent.layui.table.reload('currentTableId');
                }
            }
            $.post(url, data.field, successFn);
        });

        $('#resetBtn').click(function () {
            formInit();
            layer.msg("信息重置成功",{icon: 1});
        })

        form.render();
    });
</script>